/* =========================================================
   GLOBAL
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    overflow-x:hidden;
    font-family:'Poppins',sans-serif;
    color:#d9b071;
    position:relative;
}

/* =========================================================
   BACKGROUND
========================================================= */

body::before{

    content:'';

    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at top left,
    rgba(255,180,80,0.08),
    transparent 30%),

    radial-gradient(circle at bottom right,
    rgba(255,180,80,0.05),
    transparent 25%),

    url('bg-texture.jpg');

    background-size:cover;

    opacity:.35;

    z-index:-2;
}

/* =========================================================
   GOLD PARTICLES
========================================================= */

.gold-particles{
    position:fixed;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
}

.gold-particles span{
    position:absolute;
    width:4px;
    height:4px;
    background:#ffcc85;
    border-radius:50%;
    animation:float 12s linear infinite;
    opacity:.5;
}

@keyframes float{

    from{
        transform:translateY(100vh) scale(0);
    }

    to{
        transform:translateY(-100vh) scale(1);
    }
}

/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section{
    min-height:100vh;
    padding:40px 0 100px;
}

.container{

    width:92%;
    max-width:1450px;

    margin:auto;

    padding:60px;

    border:2px solid rgba(255,196,120,.35);

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(10px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 35px rgba(255,174,73,.15),
    inset 0 0 40px rgba(255,174,73,.08);
}

/* =========================================================
   CORNERS
========================================================= */

.corner{
    position:absolute;
    width:60px;
    height:60px;
    border:2px solid #d8a45e;
}

.top-left{
    top:12px;
    left:12px;
    border-right:none;
    border-bottom:none;
}

.top-right{
    top:12px;
    right:12px;
    border-left:none;
    border-bottom:none;
}

.bottom-left{
    bottom:12px;
    left:12px;
    border-right:none;
    border-top:none;
}

.bottom-right{
    bottom:12px;
    right:12px;
    border-left:none;
    border-top:none;
}

/* =========================================================
   LOGO
========================================================= */

.logo-box{

    width:500px;

    margin-left:auto;
    margin-bottom:60px;

    padding:25px;

    background:
    linear-gradient(to bottom,
    #141414,
    #050505);

    border:1px solid rgba(255,201,130,.3);

    overflow:hidden;

    position:relative;

    transition:1s;

    cursor:pointer;
}

.logo-box:hover{
    transform:translateY(-8px);
}

.logo-img{
    width:100%;
    display:block;
}

/* =========================================================
   CONTENT
========================================================= */

.fly-text{

    font-size:20px;

    line-height:2;

    color:#c89b61;

    margin-bottom:45px;

    opacity:0;

    transform:
    translateY(120px)
    rotateX(35deg)
    scale(.9);

    filter:blur(10px);

    transition:1.5s;
}

.line{

    width:100%;
    height:1px;

    margin:35px 0;

    background:
    linear-gradient(to right,
    transparent,
    #d7a96b,
    transparent);

    opacity:.5;
}

/* =========================================================
   HERO SECTION
========================================================= */

.hero-section{

    margin-top:60px;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(255,200,120,.25);

    cursor:pointer;

    transition:1s;

    box-shadow:
    0 0 25px rgba(255,180,70,.18),
    0 0 50px rgba(255,160,40,.12),
    inset 0 0 40px rgba(255,190,90,.08);
}

.hero-video{
    width:100%;
    display:block;
    object-fit:cover;
    transition:1.5s ease;
}

.hero-section:hover .hero-video{
    transform:scale(1.05);
}

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(to top,
    rgba(0,0,0,.65),
    transparent 40%);
}

.video-glow{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(255,210,120,.12),
    transparent 65%);

    animation:glowMove 8s ease-in-out infinite;
}

@keyframes glowMove{

    0%{
        transform:translateX(-20px);
    }

    50%{
        transform:translateX(20px);
    }

    100%{
        transform:translateX(-20px);
    }
}

.tagline-box{

    position:absolute;

    bottom:35px;
    left:50%;

    transform:translateX(-50%);

    background:
    linear-gradient(to right,
    #9c6a2d,
    #f2c27a,
    #9c6a2d);

    color:#1c1208;

    padding:18px 45px;

    font-size:28px;

    font-weight:600;

    border-radius:14px;

    z-index:5;
}


/* =========================================================
   TIMELINE WRAPPER
========================================================= */

.timeline-wrapper{

    position:relative;
    padding-bottom:100px;
    overflow:hidden;
}


/* =========================================================
   GOLD PIPE ONLY INSIDE TIMELINE
========================================================= */

.center-line{

    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:60px;
    height:90%;

    z-index:1;

    border-radius:100px;

    background:
    linear-gradient(
        to right,

        #2c1400 0%,
        #5b2c00 8%,
        #ffcf66 18%,
        #fff4c4 30%,
        #ffb300 42%,
        #ffd56e 55%,
        #ff9800 70%,
        #6a3400 88%,
        #1f0d00 100%
    );

    box-shadow:
        inset -10px 0 14px rgba(0,0,0,0.45),
        inset 10px 0 14px rgba(255,255,255,0.15),
        0 0 30px rgba(255,180,0,0.9);
}

/* PIPE SHINE */

.center-line::before{

    content:'';

   
    position:absolute;
    top:0;
    bottom:100px;   /* stops 100px before end */

    left:50%;
    transform:translateX(-50%);

    width:18px;
    height:auto;


    border-radius:100px;

    background:
    linear-gradient(
        to bottom,

        rgba(255,255,255,0.95),
        rgba(255,240,180,0.7),
        rgba(255,255,255,0.95)
    );

    filter:blur(2px);

    opacity:.95;
}

/* PIPE SEGMENTS */

.center-line::after{

    content:'';

    position:absolute;
    inset:0;

    border-radius:100px;

    background-image:
    repeating-linear-gradient(
        to bottom,

        transparent 0px,
        transparent 280px,

        rgba(255,225,140,0.95) 280px,
        rgba(255,225,140,0.95) 295px,

        rgba(90,45,0,0.95) 295px,
        rgba(90,45,0,0.95) 304px,

        transparent 304px,
        transparent 560px
    );

    opacity:.9;
}

/* =========================================================
   TIMELINE ITEMS
========================================================= */

.timeline-item{
    position:relative;
    width:100%;
    display:flex;
    align-items:center;
    min-height:45vh;
    padding:30px 0;
    margin:0;
}

.timeline-image{

    width:48%;
    position:relative;

    z-index:2;

    opacity:0;

    transition:
    transform 1.5s cubic-bezier(.16,.84,.44,1),
    opacity 1.2s ease;
}

.timeline-image.left{
    margin-right:auto;
    transform:translateX(-260px) scale(.95);
}

.timeline-image.right{
    margin-left:auto;
    transform:translateX(260px) scale(.95);
}

.timeline-image img{
    width:100%;
    display:block;
    object-fit:cover;
    transition:1s ease;

    box-shadow:
    0 0 35px rgba(255,170,0,0.2);
}

.timeline-image:hover img{
    transform:scale(1.03);
}

.timeline-item.active .timeline-image{
    opacity:1;
    transform:translateX(0) scale(1);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .center-line{
        left:35px;
        width:20px;
    }

    .timeline-image{
        width:92%;
        margin:auto !important;
    }

    .top-strip{
        flex-direction:column;
    }

    .timeline-title{
        font-size:34px;
    }

    .woodio-logo{
        width:250px;
    }

    .container{
        padding:25px;
    }

    .fly-text{
        font-size:20px;
        line-height:1.8;
    }

    .tagline-box{
        width:90%;
        text-align:center;
        font-size:18px;
    }
}